<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h1>{{ blog.title }}</h1>
      </div>

      <div class="blog-content">
<!--        &lt;!&ndash; 图片展示 &ndash;&gt;-->
<!--        <div class="blog-images" v-if="blog.images">-->
<!--          <el-image-->
<!--            :src="blog.images"-->
<!--            :preview-src-list="[blog.images]"-->
<!--            fit="cover"-->
<!--            style="width: 100%; max-height: 400px;"-->
<!--          />-->
<!--        </div>-->

        <!-- 文字描述 -->
        <div class="blog-text">
          <p style="white-space: pre-line;">{{ blog.content }}</p>
        </div>

        <!-- 统计信息 -->
        <div class="blog-stats">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="stat-item">
                <i class="el-icon-star-off"></i>
                <span>点赞: {{ blog.liked }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <i class="el-icon-chat-dot-round"></i>
                <span>评论: {{ blog.comments }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>

    <el-button
      type="primary"
      @click="goBack"
      style="margin-top: 20px;"
    >
      返回列表
    </el-button>
  </div>
</template>

<script>
import { getBlog } from "@/api/system/blog"

export default {
  name: "BlogDetail",
  data() {
    return {
      blog: {
        title: "",
        images: "",
        content: "",
        liked: 0,
        comments: 0
      }
    }
  },
  created() {
    this.getBlogDetail()
  },
  methods: {
    getBlogDetail() {
      const id = this.$route.params.id
      getBlog(id).then(response => {
        this.blog = response.data
      })
    },
    goBack() {
      this.$router.go(-1) // 返回上一页
    }
  }
}
</script>

<style scoped>
.blog-content {
  padding: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.stat-item i {
  margin-right: 8px;
  font-size: 18px;
  color: #409EFF;
}

.blog-images {
  margin-bottom: 20px;
}

.blog-text {
  line-height: 1.8;
  font-size: 16px;
  margin-bottom: 30px;
}
</style>
